<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        header{
            height: 40px;
            background-color: #0099cc;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
        }
        header font{
            color: white;
            font-size: 12px;
        }
        header span{
            padding-left: 90px;
        }
        header .headerleft{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        header .headerleft p{
            font-size: 16px;
            font-weight: 700;
            color: white;
        }
        aside{
            width: 13%;
            height: 700px;
            background-color: #2c3e50;
            float: left;
        }
        aside div{
            height: 35px;
            box-sizing: border-box;
            background-color: #2c3e50;
            display: flex;
            align-items: center;
            font-size: 12px;
        }
        aside div span:nth-child(1){
            padding-left: 10px;
            color: #c1c5e7;
        }
        aside div span:nth-child(2){
            padding-left: 10px;
            color: #c1c5e7;
        }
        aside div font{
           margin-left: 70px;
           color: #c1c5e7;
        }
        .right{
            height: 700px;
            width: 87%;
            /* background-color: blueviolet; */
            float: left;
        }
        .right .rtop{
            height: 25px;
            /* background-color: pink; */
            display: flex;
            justify-content:space-between;
        }
        .right .rtop .rtop-left{
            height: 100%;
            width: 100px;
            display: flex;
        }
        .right .rtop .rtop-left p:nth-child(1) {
            height: 100%;
            line-height: 25px;
            background-color: white;
            font-size: 8px;
            box-sizing: border-box;
            padding-left: 7px;
        }
        .right .rtop .rtop-left p:nth-child(2){
            height: 100%;
            line-height: 25px;
            background-color: #2c3e50;
            font-size: 12px;
            margin-left: 10px;
            color: #c1c5e7;
        }
        .right .rtop .rtop-right{
            height: 100%;
            width: 80px;
            display: flex;
            justify-content: space-between;
        }
        .right .rtop .rtop-right p:nth-child(1) {
            height: 100%;
            line-height: 25px;
            font-size: 8px;
            padding-left: 10px;
            box-sizing: border-box;
            color: #c1c5e7;
        }
        .right .rtop .rtop-right p:nth-child(2){
            height: 100%;
            line-height: 25px;
            /* background-color: #2c3e50; */
            font-size: 12px;
            color: #c1c5e7;
        }
        .rightheader{
            height: 65px;
            width: 100%;
            background-color: #f5f6fa;
            display: flex;
            justify-content: space-around;
        }
        .rightheader div{
            width: 24%;
            height: 100%;
            /* background-color: red; */
        }
        .rightheader div img{
            width: 100%;
            height: 100%;
        }
        .rmain{
            height: 400px;
            display: flex;
            justify-content: space-between;
            background-color: #f5f6fa;
        }
        .rmain .mainleft{
            height: 400px;
            width: 49.5%;
            background-color: white;
        }
        .rmain .mainright{
            height: 400px;
            width: 49.5%;
            background-color: white;
            margin-left: 15px;
        
        }
        .bottom{
            width: 100%;
            height: 400px;
        }
        table{
            width: 100%;
            height: 300px;
            margin-left: 48px;
        }
        table tr th{
            text-align: left;
            border-bottom: 5px solid #f5f6fa;
            
        }
        table tr td{
            border-bottom: 2px solid #f5f6fa;
            font-size: 12px;
        }
    </style>
    <link rel="stylesheet" href="./iconfont/font_3777730_zq1fsdmbz3/iconfont.css">
</head>
<body>
    <header>
        <div class="headerleft">
            <p>后台管理系统</p>
            <span class="iconfont icon-liebiao1"></span>
        </div>
        <font>当前用户:bootstrap中文 &emsp; 角色：管理员</font>
    </header>
    <aside>
        <div>
            <span class="iconfont icon-shouye"></span>
            <span>后台首页</span>
            <font>&gt;</font>
        </div>
        <div>
            <span class="iconfont icon-sheji"></span>
            <span>设计元素</span>
            <font>&gt;</font>
        </div>
        <div class="biaodan">
            <span class="iconfont icon-liebiao1"></span>
            <span>表单元素</span>
            <font>&gt;</font>
        </div>
        <div>
            <span class="iconfont icon-diannao"></span>
            <span>示例页面</span>
            <font>&gt;</font>
        </div>
        <div>
            <span class="iconfont icon-liebiao1"></span>
            <span>常用列表</span>
            <font>&gt;</font>
        </div>
        <div>
            <span class="iconfont icon-chajian"></span>
            <span>版本插件</span>
            <font>&gt;</font>
        </div>
        <div>
            <span class="iconfont icon-shuzhuangtu"></span>
            <span>统计图表</span>
            <font>&gt;</font>
        </div>
    </aside>
    <div class="right">
        <div class="rtop">
            <div class="rtop-left">
                <p>&lt;&lt;</p>
                <p>欢迎首页</p>
            </div>
            <div class="rtop-right">
                <p>&gt;&gt;</p>
                <p>页面操作</p>
            </div>
        </div>
        <div class="rightheader">
            <div>
                <img src="./iconfont/font_3777730_zq1fsdmbz3/1.png" alt="">
            </div>
            <div>
                <img src="./iconfont/font_3777730_zq1fsdmbz3/2.png" alt="">
            </div>
            <div>
                <img src="./iconfont/font_3777730_zq1fsdmbz3/3.png" alt="">
            </div>
            <div>
                <img src="./iconfont/font_3777730_zq1fsdmbz3/4.png" alt="">
            </div>
        </div>
        <div class="rmain">
            <div class="mainleft"></div>
            <div class="mainright"></div>  
        </div>
        <div class="bottom">
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>订单号</th>
                        <th>商品名称</th>
                        <th>下单日期</th>
                        <th>状态</th>
                        <th>执行状况</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td></td>
                    </tr> -->
                </tbody>
            </table>
        </div>

    </div>


</body>

</html>
<script src="./表格.json"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./promise-ajax.js"></script>
<script>
     var example = document.querySelector('.mainleft')
    var e = echarts.init(example)
    e.setOption(
        {
            //title为图表的标题
            title: {
                text: '每月收入',
                left: 'left',
            },
            //xy轴设置
            xAxis: {
                splitLine: {
                show: true
            },
                data: [01,02,03,04,05,06,08,09,10,11]
            },
            yAxis: {
                //  data: [1500, 2000, 2500, 3000, 3500,4000,4500,5000]
                splitLine: {
                    show: true
                }
            },
            legend: { //图例
                top: 25,
                // right:10,
            },
            //数据系列，添加数据
            series: [
                {
                    name: '当前每月收入',
                    //柱子的宽度
                    barWidth: 20,
                    //显示背景色
                    showBackground: true,
                    backgroundStyle: {
                        //背景圆角
                        // borderRadius: [15]
                    },
                    itemStyle: {
                        //边框圆角 
                        borderRadius: [0, 0, 0, 0],//边框圆角 
                    },
                    //bar:柱状 line：线状 pie：线状
                    type: 'bar',
                    data: [2600, 1600, 2000, 3200, 4800,3500,1700,2600,2250,1700],
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ //颜色(渐变色)
                        { offset: 0, color: '#93bff6' },
                        { offset: 0.5, color: '#108df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
                {
                    name: '同期每月收入',
                    //柱子的宽度
                    barWidth: 20,
                    //显示背景色
                    // showBackground: true,
                    backgroundStyle: {
                        //背景圆角
                        // borderRadius: [15]
                    },
                    itemStyle: {
                        //边框圆角 
                        // borderRadius: [0, 0, 0, 0],//边框圆角 
                    },
                    //bar:柱状 line：线状 pie：线状
                    type: 'bar',
                    data: [2200, 1700, 1900, 3400, 4500,3400,1900,2000,2850,2300],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                        { offset: 0, color: 'gray' },
                    ])
                }
            ]
        }
    )

    var example1 = document.querySelector('.mainright')
    var e1 = echarts.init(example1);
    e1.setOption({
        title: {
            text: '每年收入走势',
            left: 'left',
        },
        showBackground: true,
        legend: { //图例
            top: 25,
            // right:10,
        },
        xAxis: { //x轴设置
            splitLine: {
                show: true
            },
            data: [2000,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019]
        },
        yAxis: { //y轴设置
            splitLine: {
                show: true
            }
        },
        series: [ //数据系列
        {
                name: '每年收入走势',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [50, 55, 60, 40, 45,40,66,40,68,20,72],
                symbolSize: 6, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'green', //折线颜色
                        borderWidth: 0, //圆点的边框宽度
                        borderColor: 'green', //圆点的边框颜色
                        lineStyle: { width: 1 }, //折现的宽度
                        shadowBlur: 1,
                        shadowColor: '#188df0'

                    }
                }

            },
            {
                name: '每年同期收入走势',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [43, 50, 53, 40, 47,40,66,45,58,30,72],
                symbolSize: 6, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'blue', //折线颜色
                        borderWidth: 0, //圆点的边框宽度
                        borderColor: 'white', //圆点的边框颜色
                        lineStyle: { width: 1 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            }

        ]
    })
     
    

      ajax('get','./表格.json',{}).then((data)=>{
        var str=data.list.map((item)=>{
            return`
            <tr>
                <td>${item.id}</td>
                <td>${item.effects}</td>
                <td>${item.name}</td>
                <td>${item.data}</td>
                <td>${item.status}</td>
                <td>${item.situation}</td>
            </tr>
            `
        }).join('')
        document.querySelector('tbody').innerHTML=str
      })
    
   

    // function render(data){
    //     var str=data.map((item)=>{
    //         return`
    //         <tr>
    //             <th>${item.id}</th>
    //             <th>${item.effects}</th>
    //             <th>${item.name}</th>
    //             <th>${item.data}</th>
    //             <th>${item.status}状态</th>
    //             <th>${item.situation}</th>
    //         </tr>
    //         `
    //     }).join('')
    //     document.querySelector('tbody').innerHTML=str
    // }
    // render(data)
    

</script>